<template>
  <div class="">
    <div class="page-filter mb10 fl">
      <el-form ref="filter" :model="filter" label-width="0">
        <el-form-item class="mr10 mb5 fl">
          <ProFilter v-model="filter.id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl">
          <CustomerSelect v-model="filter.ctm_id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" prop="begin_order_time">
          <el-date-picker
            v-model="filter.begin_order_time"
            placeholder="开始时间"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" prop="end_order_time">
          <el-date-picker
            v-model="filter.end_order_time"
            placeholder="结束时间"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" style="width: 300px">
          <el-button
            size="small"
            @click="app.resetFields($refs['filter'].$parent, 'filter')"
            >清 空</el-button
          >
          <el-button type="primary" size="small" @click="getList"
            >查 询</el-button
          >
          <el-button type="primary" size="small" @click="handleOut"
            >导 出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="app.loading"
      class="search-table"
      :data="list"
      border
      :summary-method="getSummaries"
      show-summary
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" align="center" width="56px">
        <template slot-scope="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="客户名称" width="220px" prop="lc_name" />
      <el-table-column
        label="项目名称"
        width="220px"
        prop="name"
        :formatter="paytypeFormatter"
      />
      <el-table-column label="PO单号" width="190px">
        <template slot-scope="{ row }">
          {{ 'PO' + row.id }}
        </template>
      </el-table-column>
      <el-table-column
        label="下单日期"
        align="center"
        width="110px"
        prop="order_time"
      />
      <!-- <el-table-column label="成本" align="right" width="140px">
        <template slot-scope="{row}">
          {{ app.toFix(row.cost, 2) }}
        </template>
      </el-table-column>
      <el-table-column label="报价金额" align="right" width="140px">
        <template slot-scope="{row}">
          {{ app.toFix(row.quoted_price, 2) }}
        </template>
      </el-table-column> -->
      <el-table-column label="订单金额 " align="right" width="240px">
        <template slot-scope="{ row }">
          {{ app.toFix(row.trading_price, 2) }}
        </template>
      </el-table-column>
      <el-table-column
        label="税率"
        align="right"
        width="60px"
        prop="tax_rate"
      />
      <el-table-column label="付款方式" width="110px">
        <template slot-scope="{ row }">
          <span v-for="(item, index) in row.payments" :key="index" class="mr10">
            <a
              style="color: blue"
              @click="
                handleDialog({
                  ...{ pro_id: row.id },
                  ...{
                    dRef: 'paytypes',
                    dTitle: '项目付款方式',
                    dType: 'edit',
                    dField: dFieldPaytypes,
                  },
                })
              "
              >{{ item.v + ': ' + item.s + '%' }}</a
            ><br />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="回款计划" min-width="410px">
        <template slot-scope="{ row }">
          <span v-for="(item, index) in row.funds" :key="index" class="mr10">
            <a
              href="javascript:void(0)"
              style="color: blue"
              @click="
                handleDialog({
                  ...{ pro_id: row.id },
                  ...{
                    dRef: 'funds',
                    dTitle: '项目回款计划',
                    dType: 'edit',
                    dField: dFieldFunds,
                  },
                })
              "
              >{{
                '预计回款日期：' +
                item.t +
                '；' +
                item.v +
                '： ' +
                item.m +
                '；比例：' +
                app.toFix((item.m / row.trading_price) * 100, 2) +
                '%'
              }}</a
            ><br />
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="回款计划" min-width="330px">
        <template slot-scope="{row}">
          <span v-for="(item, index) in row.xshks" :key="index" class="mr10">
            <a
              href="javascript:void(0)"
              style="color: blue" 
              @click="handleDialog({...{ 'pro_id': row.id }, ...
              {dRef: 'dialog', dTitle: '项目回款信息', dType: 'edit', dField: dField}})"
            >{{ item.v + "： " + item.m + "；日期：" + item.t }}</a><br>
          </span>
        </template>
      </el-table-column> -->
      <el-table-column label="回款金额" align="right" width="110px">
        <template slot-scope="{ row }">
          <a
            href="javascript:void(0)"
            style="color: blue"
            @click="
              handleDialog({
                ...{ pro_id: row.id },
                ...{
                  dRef: 'xshk',
                  dTitle: '项目回款信息',
                  dType: 'edit',
                  dField: dFieldXSHK,
                },
              })
            "
            >{{ app.toFix(row.xshk_money, 2) }}</a
          >
        </template>
      </el-table-column>
      <el-table-column label="回款比例" align="right" width="90px">
        <template slot-scope="{ row }">
          {{ app.toFix((row.xshk_money / row.trading_price) * 100, 2) + '%' }}
        </template>
      </el-table-column>
      <el-table-column label="拜访报告" align="center" width="80px">
        <template slot-scope="{ row }">
          <a
            href="javascript:void(0)"
            @click="
              handleDialog({
                ...{ pro_id: row.id },
                ...{
                  dRef: 'visits',
                  dTitle: '拜访记录信息',
                  dType: 'edit',
                  dField: dFieldVisit,
                },
              })
            "
            >详情</a
          >
        </template>
      </el-table-column>
      <el-table-column label="项目投标" align="center" width="80px">
        <template slot-scope="{ row }">
          <a
            href="javascript:void(0)"
            @click="
              handleDialog({
                ...row,
                ...{
                  dRef: 'bid',
                  dTitle: '项目投标',
                  dType: 'edit',
                  dField: dFieldBid,
                },
              })
            "
            >详情</a
          >
        </template>
      </el-table-column>
      <el-table-column
        label="项目状态"
        align="center"
        width="90px"
        :formatter="formatterState"
      />
      <!-- <el-table-column label="下单时间" align="center" width="110px" prop="order_time" /> -->
      <!-- <el-table-column label="项目进度" align="center" width="80px">
        <template slot-scope="{row}">
          <a
            href="javascript:void(0)"
            @click="handleDialog({...row, ...
            {dRef: 'progress', dTitle: '项目进度', dType: 'edit', dField: dFieldProgress}})"
          >详情</a>
        </template>
      </el-table-column> -->
      <el-table-column label="备注" min-width="260px" prop="remark">
        <template slot-scope="{ row }">
          <span v-if="row.remark">{{ row.remark }} <br /></span>
          <span v-if="row.bid_remark">{{ row.bid_remark }} <br /></span>
          <span v-if="row.progress_remark"
            >{{ row.progress_remark }} <br
          /></span>
          <span v-if="row.order_remark">{{ row.order_remark }} <br /></span>
          <span v-if="row.contract_remark"
            >{{ row.contract_remark }} <br
          /></span>
          <span v-if="row.budget_remark">{{ row.budget_remark }} <br /></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="90px" fixed="right">
        <template slot-scope="{ row }">
          <el-dropdown>
            <el-button type="primary" size="mini">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="
                  handleDialog({
                    ...row,
                    ...{ dTitle: '编辑下单', dType: 'edit', dField: dField },
                  })
                "
                >编 辑</el-dropdown-item
              >
              <!-- <el-dropdown-item
                @click.native="handleDialog({...row, ...
                {dRef: 'contract', dTitle: '项目税率', dType: 'edit', dField: dFieldContract}})"
              >税 率</el-dropdown-item> -->
              <el-dropdown-item
                @click.native="
                  handleDialog({
                    ...row,
                    ...{ pro_id: row.id },
                    ...{
                      dRef: 'paytypes',
                      dTitle: '项目付款方式',
                      dType: 'edit',
                      dField: dFieldPaytypes,
                    },
                  })
                "
                >付款方式</el-dropdown-item
              >
              <!-- <el-dropdown-item
                @click.native="handleDialog({...row, ...
                {dRef: 'budget', dTitle: '项目付款方式', dType: 'edit', dField: dFieldBudget}})"
              >预 算</el-dropdown-item> -->
              <el-dropdown-item
                @click.native="
                  handleDialog({
                    ...{ pro_id: row.id },
                    ...{
                      dRef: 'funds',
                      dTitle: '项目回款计划',
                      dType: 'edit',
                      dField: dFieldFunds,
                    },
                  })
                "
                >回款计划</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="
                  handleDialog({
                    ...{
                      pro_id: row.id,
                      paytype: '',
                      trading_price: row.trading_price,
                    },
                    ...{
                      dRef: 'xshk',
                      dTitle: '项目回款金额',
                      dType: 'edit',
                      dField: dFieldXSHK,
                    },
                  })
                "
                >回款金额</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="
                  files({
                    e_id: row.id,
                    type: '订单管理',
                    db_type: 'logc_pro_archives',
                  })
                "
                >附 件</el-dropdown-item
              >
              <!-- <el-dropdown-item @click.native="outData(row)">导 出</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="filter.pageAll > 0"
      :total="filter.pageAll"
      :page.sync="filter.pageCurrent"
      :limit.sync="filter.pageNumber"
      @pagination="getList"
    />
    <Dialog ref="dialog" :get-data="getList" :info="dialog" />
    <Visits ref="visits" :get-data="getList" :info="dialog" />
    <Bid ref="bid" :get-data="getList" :info="dialog" />
    <!-- <Progress ref="progress" :get-data="getList" :info="dialog" /> -->
    <XSHK ref="xshk" :get-data="getList" :info="dialog" />
    <Paytypes ref="paytypes" :get-data="getList" :info="dialog" />
    <!-- <Contract ref="contract" :get-data="getList" :info="dialog" /> -->
    <!-- <Budget ref="budget" :get-data="getList" :info="dialog" /> -->
    <Funds ref="funds" :get-data="getList" :info="dialog" />
    <Cos ref="cos" :info="dialog" />
  </div>
</template>

<script>
import { pros, outPros } from '@/api/project'
import { priceReports } from '@/api/project/report'
import Dialog from './components/order-dialog'
import Visits from './components/visits-dialog'
import Bid from './components/bid-dialog'
// import Progress from './components/progress-dialog'
import ProFilter from '@/components/ProFilter'
import XSHK from './components/xshks-dialog'
// import Contract from './components/contract-dialog'
import Paytypes from './components/paytypes-dialog'
// import Budget from './components/budget-dialog'
import Funds from './components/funds-dialog'
import page from '@/utils/page'
import CustomerSelect from '@/myComponents/CustomerSelect'

export default {
  name: '',
  components: {
    ProFilter,
    Dialog,
    Visits,
    Bid,
    XSHK,
    Paytypes,
    Funds,
    CustomerSelect,
  },
  extends: page,
  props: {
    reqList: {
      default: pros,
      type: Function,
    },
  },
  data() {
    return {
      price: {},
      parameter: { states: '1, 4' },
      dField: ['id', 'order_time', 'remark', 'tax_rate', 'trading_price'],
      dFieldXSHK: ['pro_id', 'paytype', 'trading_price'],
      dFieldVisit: ['pro_id'],
      dFieldBid: [
        'id',
        'cost',
        'quoted_price',
        'negotiated_price',
        'trading_price',
        'su_quoted',
        'bid_remark',
      ],
      dFieldProgress: ['id', 'progress_remark', 'state'],
      // dFieldContract: ['id', 'tax_rate', 'contract_remark', 'trading_price', 'no'],
      dFieldPaytypes: ['pro_id', 'trading_price'],
      // dFieldBudget: ['id', 'name', 'ascription', 'begin_time', 'end_time', 'remark'],
      dFieldFunds: ['pro_id', 'paytype'],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleOut() {
      outPros({
        ...this.filter,
      })
        .then((response) => {
          this.out(response)
        })
        .catch((err) => {
          this.$message.error(err.msg)
        })
    },
    getListAfter() {},
    paytypeFormatter(e, c) {
      const xshk = e.xshk
      const xshks = []
      if (xshk) {
        const array = xshk.split(',')
        if (array.length > 0) {
          array.forEach((element) => {
            const js = element.split('#')
            const f = {}
            f.v = js[0]
            f.m = js[1]
            f.t = js[2]
            xshks.push(f)
          })
        }
      }
      e.xshks = xshks

      const fund = e.fund
      const funds = []
      if (fund) {
        const array = fund.split(',')
        if (array.length > 0) {
          array.forEach((element) => {
            const js = element.split('#')
            const f = {}
            f.v = js[0]
            f.m = js[1]
            f.t = js[2]
            funds.push(f)
          })
        }
      }
      e.funds = funds

      const payment = e.payment
      const payments = []
      if (payment) {
        const array = payment.split(',')
        if (array.length > 0) {
          array.forEach((element) => {
            const js = element.split('-')
            const f = {}
            f.v = js[0] || ''
            f.s = js[3] || ''
            payments.push(f)
          })
        }
      }
      e.payments = payments

      return e.name
    },
    formatterState(e) {
      if (e.state === 0) {
        return '进展中'
      } else if (e.state === 1) {
        return '已成交'
      } else {
        return '未成交'
      }
    },
    getListAfter(e) {
      this.price = e.summary
    },
    getSummaries() {
      const sums = []
      sums[0] = '合计'
      sums[5] = this.app.toFix(this.price.trading_price, 2)
      sums[9] = this.app.toFix(this.price.xshk_money, 2)
      return sums
    },
  },
}
</script>
